<template>
  <!-- <el-card class="box-card-component" style="margin-left:8px;padding-top:24px"> -->
    <!-- <div slot="header" class="box-card-header">
      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
    </div> -->
    <div style="position:relative;" v-if="sum.sum">
      <div class="totalBox">
           <div class="box">
             <h1>{{ sum.sum[0]}}</h1>
             <p><i class="el-icon-mobile-phone" />&nbsp;手机号</p>
           </div>
           <div class="box IDCart">
             <h1>{{ sum.sum[1]}}</h1>
             <p> <img src="http://adg.bytemooc.cn/static/idcard.png" style="height: 16px;padding-top: 2px;" alt="">&nbsp;身份证号</p>
           </div>
           <div class="box bankcard">
             <h1>{{ sum.sum[2]}}</h1>
             <p><i class="el-icon-bank-card" />&nbsp;银行卡</p>
           </div>
           <div class="box desensitization">
             <h1>{{ sum.sum[3]}}</h1>
             <p> <i class="el-icon-coin card-panel-icon" />&nbsp;脱敏值</p>
           </div>

      </div>
      <!-- <pan-thumb :image="avatar" class="panThumb" /> -->
      <!-- <p style="margin-bottom:57px">重点关注数据的实时访问量</p>
      <mallki class-name="mallki-text" text="vue-element-admin" /> -->
     <!-- <div class="progress-item"> -->
        <!-- <span>手机号{{ sum.sum[0]}}条</span>
        <div class="el-progress el-progress--line" style="margin:6px 0">
           <el-progress :percentage="sum.sum[0]" :format="format"  color="#2ec7c9" :show-text="false" />
        </div> -->
      <!-- </div><div class="progress-item"> -->
        <!-- <span>身份证号{{ sum.sum[1]}}条</span>
        <div class="el-progress el-progress--line" style="margin:6px 0">
           <el-progress :percentage="sum.sum[1]" :format="format"  color="#b6a2de" :show-text="false" />
        </div> -->
      <!-- </div><div class="progress-item"> -->
        <!-- <span>银行卡号{{ sum.sum[2]}}条</span>
        <div class="el-progress el-progress--line" style="margin:6px 0">
           <el-progress :percentage="sum.sum[2]" :format="format" color="#5ab1ef" :show-text="false" />
        </div> -->
      <!-- </div> -->
      <!-- <div class="progress-item"> -->
        <!-- <span>脱敏值{{ sum.sum[3]}}条</span>
        <div class="el-progress el-progress--line" style="margin:6px 0">
           <el-progress :percentage="sum.sum[3]" :format="format"  color="#ffb980" :show-text="false" />
        </div> -->
      <!-- </div> -->
    </div>
  <!-- </el-card> -->
</template>


<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import Mallki from '@/components/TextHoverEffect/Mallki'

export default {
   props: {
    sumData: {
      // type: Array,
      required: true
    }
  },
components: { PanThumb, Mallki },
 methods: {
      format(percentage) {
        return  `${percentage}条`;
      }
    },
    watch: {
    sumData: {
      deep: true,
      handler(val) {
        console.log(val)
        this.sum = val
      }
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      statisticsData: {
        article_count: 1024,
        pageviews_count: 1024
      },
      sum:{}
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .mallki-text {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    font-weight: bold;
  }
  .panThumb {
    z-index: 100;
    height: 70px!important;
    width: 70px!important;
    position: absolute!important;
    top: -45px;
    left: 0px;
    border: 5px solid #ffffff;
    background-color: #fff;
    margin: auto;
    box-shadow: none!important;
    ::v-deep .pan-info {
      box-shadow: none!important;
    }
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  @media only screen and (max-width: 1510px){
    .mallki-text{
      display: none;
    }
  }
}
.totalBox {
  margin-top: 40px;
  display: flex;
  // justify-content: flex-end;
  flex-wrap:wrap;
  justify-content: space-around;
   
}
.box {
  width: 150px;
  height: 120px;
  // border: 1px solid rgba($color: #000000, $alpha: .3);
  box-shadow: 0px 0px 6px rgba($color: #000000, $alpha: .3);
  
  border-radius: 10px;
  // margin-top: 10rpx;
  margin-bottom: 34px;
  text-align: center;
}
.box h1 {
  color: rgb(90,84,248);
  font-size: 40px;
  margin: 0px!important;
  margin-top: 30px !important;
}
.box p{
  color: rgb(111,109,249);
  margin: 0px!important;
  margin-top: 10px !important;
}
.IDCart h1{
    color: rgb(1,203,209);
}
.IDCart p{
   color: rgb(1,203,209);
}

.bankcard h1{
    color: rgb(255,94,150);
}
.bankcard p{
  //  color: rgb(1,203,209);
   color: rgb(255,94,150);
}

.desensitization h1 {
  color: rgb(245,177,92);
}

.desensitization p {
  color: rgb(245,177,92);
}


</style>
